<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>15-随机显示颜色.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      新案例的时候 回顾旧的案例
      每一次刷新页面的时候 body标签 随机显示颜色   

      1 实现方式1   颜色只有 n种 无法做到更加灵活 

       */

      // let colors = ['red', 'black', 'pink', 'yellow'];

      // let index = Math.round(Math.random() * (colors.length - 1));
      // // index  0  3

      // // document.querySelector("body")

      // document.body.style.backgroundColor = colors[index];

      // 2 方式方式2 背景颜色 rgb(0-255,0-255,0-255)

      function getRandomColor(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }

      // 随机数1  0-255
      let color1 = getRandomColor(0, 255);
      // 随机数2  0-255
      let color2 = getRandomColor(0, 255);
      // 随机数3  0-255
      let color3 = getRandomColor(0, 255);

      // document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
      // 先写上 `rgb(100,200,150)`; 来验证 格式没有写错
      document.body.style.backgroundColor=`rgb(${color1},${color2},${color3})`;
    </script>
  </body>
</html>
